<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div v-dir>第一个</div>
			<p v-dir=" 'blue' ">第二个</p>
			<h2 v-dir=" 'yellow' ">第三个</h2>
			<div v-dir=" color ">第四个</div>

		</div>
		<script>
			Vue.directive("dir", {
				inserted(el, binding) {
					el.style.background = binding.value ? binding.value : "red"
				}
			})
			new Vue({
				el: "#box",
				data: {
					color: "#ccc"
				}
			})
		</script>
	</body>
</html>
